import React, { useMemo } from 'react'
import {
    connect
} from 'react-redux'
import { bindActionCreators } from 'redux';
import {
    setStep,
    setPhone,
    setHistoryStep
} from 'store/actions'
import CommonAccountBg from 'components/CommonAccountBg/CommonAccountBg';
import './account.scss'
import CreateAccount from './CreateAccount';
import ResetPwd from './ResetPwd';
import VerifyAccount from './VerifyAccount';
import Login from './Login';
import WeChatLogin from './WeChatLogin';
import PhoneCreate from './PhoneCreate';
interface AccountManage {
    match: any,
    phone: string,
    step: string,
    historyStep: string,
    dispatch: any,
}
function Account(props: AccountManage) {
    const { match, phone, step, dispatch, historyStep } = props;
    const accountCbs = useMemo(() => {
        return bindActionCreators({
            setPhone, setStep, setHistoryStep
        }, dispatch)
    }, [dispatch])
    return (
        <div >
            <CommonAccountBg>
                {/* 验证账号是否存在 */}
                {step === '1' ? <VerifyAccount phone={phone} {...accountCbs} /> : ''}
                {/* 创建账号 */}
                {step === '2' ? <CreateAccount  {...accountCbs} phoneNum={phone} historyStep={historyStep} /> : ''}
                {/* 重制密码 */}
                {step === '3' ? <ResetPwd {...accountCbs} phoneNum={phone} historyStep={historyStep} /> : ''}
                {/* 登陆 */}
                {step === '4' ? <Login {...accountCbs} phoneNum={phone} historyStep={historyStep} /> : ''}
                {/* 微信登陆 */}
                {step === '5' ? <WeChatLogin {...accountCbs}  historyStep={historyStep} /> : ''}
                {/*  */}
                {/* {step === '6' ? <PhoneCreate {...accountCbs} phoneNum={phone} historyStep={historyStep} /> : ''} */}
            </CommonAccountBg>

        </div>
    )
}

export default connect(
    function mapStateToProps(state: any) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(Account)
